<template>
  <div id="app">
    <!-- 页面的头部 -->
    <div class="header">
      <div class="logo"></div>
      <div class="desc">新型冠状病毒肺炎</div>
      <div class="desc_data">疫情实时大数据报告</div>
      <div class="looks">共{{looks.toLocaleString()}}人浏览</div>
      <div class="toArea">
        <span>切换地区</span>
        <i></i>
      </div>
    </div>
    <!-- 切换按钮 -->
    <div class="page_change">
      <!-- 粘性布局 -->
      <van-sticky>
        <van-tabs @change='countryChange' v-model="active" title-active-color='#10aeb5'>
          <van-tab title="国内疫情"></van-tab>
          <van-tab title="国外疫情"></van-tab>
        </van-tabs>
      </van-sticky>
    </div>

    <!-- 疫情地图 -->
    <div class="data_map" style="height:800px;" v-if='tag_'>
      <!-- 截止时间 -->
      <div class="end_time">
        <div>国内疫情</div>
        <div>
          <div>数据更新至{{endTime}}</div>
          <div><i style="background-image:url('https://mms-res.cdn.bcebos.com/mms-res/voicefe/captain/mola/Virus/1.1.287/assets/question-mark.f7b4fec.png');height:12px;width:12px;background-size:100% 100%;display: inline-block;margin-right:5px;"></i>数据说明</div>
        </div>
      </div>
      <!-- 数据列表 -->
      <div class="data_list">
        <van-row>
          <van-col span="8">
            <div>累计确诊<i style="background-image:url('https://mms-res.cdn.bcebos.com/mms-res/voicefe/captain/mola/Virus/1.1.287/assets/question-mark.f7b4fec.png');height:12px;width:12px;background-size:100% 100%;display: inline-block;margin-left:5px;"></i></div>
            <div class="num_color">{{total_confirmed}}</div>
          </van-col>
          <van-col span="8">
            <div>累计疑似</div>
            <div class="num_color">{{total_suspected}}</div>
          </van-col>
          <van-col span="8">
            <div>累计死亡</div>
            <div class="num_color">{{total_dead}}</div>
          </van-col>
        </van-row>
        <van-row>
          <van-col span="8">
            <div>累计治愈</div>
            <div class="num_color">{{total_cure}}</div>
          </van-col>
          <van-col span="8">
            <div>现有确诊</div>
            <div class="num_color">{{total_severe}}</div>
          </van-col>
          <van-col span="8">
            <div>境外输入</div>
            <div class="num_color">{{total_outside}}</div>
          </van-col>
        </van-row>
      </div>

      <!-- 中国地图 -->
      <div class="china_map">
        <!-- 切换按钮 -->
        <van-tabs @click='dataChange' title-active-color='#10aeb5'>
          <van-tab title="现有确诊"></van-tab>
          <van-tab title="累计确诊"></van-tab>
        </van-tabs>
        <!-- 地图容器 -->
        
        <div id="main" style="height:300px;width:100%;position:relative;">
          <div style="position:absolute;left:0;top:0;right:0;bottom:0;margin:auto;width:40px;height:40px;">
            <!-- 加载动画，防止页面首次加载时有两秒钟的空白 -->
            <van-loading />
          </div>
        </div>
      </div>

      <!-- 柱状图 -->
      <div class="bar">
        <div id="data_bar" style="height:300px;width:100%;"></div>
      </div>
  
      <!-- 数据表格 -->
      <div class="data_table">
        <div class="table_title">国内各地区疫情统计汇总<i style="background-image:url('https://mms-res.cdn.bcebos.com/mms-res/voicefe/captain/mola/Virus/1.1.287/assets/question-mark.f7b4fec.png');height:12px;width:12px;background-size:100% 100%;display: inline-block;margin-left:5px;"></i></div>
        <div class="table_tag">7:00-10:00为更新高峰，数据若滞后敬请谅解</div>
        <div class="wrap">
          <van-row>
            <van-col span="6">疫情地区</van-col>
            <van-col span="4">新增</van-col>
            <van-col span="4">境外</van-col>
            <van-col span="3">累计</van-col>
            <van-col span="4">治愈</van-col>
            <van-col span="3">死亡</van-col>
          </van-row>
          <van-row v-for='item in data_table' :key='item.id'>
            <van-col span="6">{{item.province}}</van-col>
            <van-col span="4">{{item.outside}}</van-col>
            <van-col span="4">{{item.severe}}</van-col>
            <van-col span="3">{{item.confirmed}}</van-col>
            <van-col span="4">{{item.cure}}</van-col>
            <van-col span="3">{{item.dead}}</van-col>
          </van-row>
          <div v-if='show_btn' style="text-align:center;">
            <span @click="show_all">展开全部</span>
            <i style="background-image:url('https://mms-res.cdn.bcebos.com/mms-res/voicefe/captain/mola/Virus/1.1.287/assets/more.b2bd431.svg');width:10px;height:10px;background-size:100% 100%;display:inline-block;transform: rotate(90deg);margin-left:5px;"></i>
          </div>
        </div>
      </div>
    </div>

    <!-- 实时新闻 -->
    <div class="data_map" v-else>
      <div class="news" v-for='item in news_list' :key='item.id'>
        <!-- ｜ 是指管道符号，将左边的变量作为参数传递给右边的方法 -->
        <div class="time">{{item.publishTime | dateFMT}}</div>
        <div class="line">
          <div class="circle"></div>
          <div class="line_"></div>
        </div>
        <div class="article" @click="to_news_detail(item.id)">
          <h4 style="margin:0;">{{item.title}}</h4>
          <div v-html="item.content"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// 导入axios
import axios from '../http/axios'
// 导入moment
import moment from 'moment'
// 导入json文件
import Data from '../assets/data.json'
export default {
  data() {
    return {
      Data,
      active:0,
      tag_:true,
      looks:8266632627,
      endTime:0,
      total_confirmed:0,
      total_dead:0,
      total_suspected:0,
      total_cure:0,
      total_severe:0,
      total_outside:0,
      new_data:[],
      bar_data:{},
      data_table:[],
      params:{
        page:1,
        pageSize:10
      },
      show_btn: true,
      news_list:[]
    }
  },
  created() {
    this.login()
    // this.all_looks()
    this.end_time()
    this.findData(0)
    this.find_table_data()
    this.find_news()
  },
  mounted() {
    // 定时器，规定多少秒之后执行某代码
    setTimeout(()=>{
      this.initEchart()
      this.init_bar()
    },2000)
  },
  // 过滤器
  filters: {
    // 处理日期格式
    dateFMT(str) {
      return moment(str).format('YYYY-MM-DD')
    }
  },
  // 监听器
  watch: {
    // 只要new_data发生变化时，就去重新绘制地图
    new_data:{
      handler:function() {
        this.initEchart()
      },
      deep:true // 深度监听
    },
    params:{/* 只要页码发生改变时，重新执行查询表格数据的方法 */
      handler:function() {
        this.find_table_data()
      },
      deep:true // 深度监听
    },
    // 当tag_发生改变时，重新调用绘制中国地图的方法，确保该方法在切换页面的时候每次都会调用
    tag_:{
      handler:function(val) {
        if(val) {
          setTimeout(() => {
            this.initEchart()
            this.init_bar()
          }, 2000);
        }
      },
      deep:true // 深度监听
    }
  },
  methods: {
    // 跳转到新闻详情页
    to_news_detail(id) {
      /**
       * query:
       *  用于路由传递参数，也就是将参数拼接到地址栏上
       * 作用:
       *  解决页面刷新时数据丢失的现象
       */
      this.$router.push({
        path:'/news',
        query:{id}
      })
    },
    // 查询所有新闻
    find_news() {
      axios({
        url:'http://39.96.21.48:8001/article/findAll',
        method:'get'
      }).then((res)=>{
        // reverse() 是数组的api，用于反转数组的元素
        this.news_list = res.data.data.reverse()
      })
    },
    // 查询表格数据
    find_table_data() {
      axios({
        url:'http://39.96.21.48:8001/epidemic/pageQuery',
        method:'get',
        params:this.params
      }).then((res)=>{
        this.data_table = res.data.data.list
      })
    },
    // 展开全部
    show_all() {
      this.params.pageSize = 1000;
      // 隐藏按钮
      this.show_btn = false;
    },
    // 绘制柱状图
    init_bar() {
      var myChart = echarts.init(document.getElementById('data_bar'));
      var option = {
        xAxis: {
            type: 'category',
            data: this.bar_data.name
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: this.bar_data.value,
            type: 'bar',
            showBackground: true,
            backgroundStyle: {
                color: 'rgba(220, 220, 220, 0.8)'
            }
        }]
      };
      myChart.setOption(option);
    },
    // 现有确诊和累计确诊数据的切换
    dataChange(name) {
      this.findData(name)
    },
    // 查询中国所有省的数据
    findData(name) {
      this.new_data = this.Data.data.list.map((item)=>{
        if(name == 0) {
          // 现有确诊
          return {
              name:item.name, // item是被遍历数组中的每一项
              value:item.econNum
          }
        } else {
          // 累计确诊
          return {
              name:item.name, // item是被遍历数组中的每一项
              value:item.value
          }
        }
      })
      // axios({
      //     url:'/test/news/wap/fymap2020_data.d.json',
      //     method:'GET'
      // }).then((res)=>{
      //     // 将查询到结果转换成dataList一样的格式[{name:'',value:''}]
          
      //     // map是数组的api(方法)，可以用来映射数组，也就是将数组换一种方式显示
          // this.new_data = res.data.data.list.map((item)=>{
          //   if(name == 0) {
          //     // 现有确诊
          //     return {
          //         name:item.name, // item是被遍历数组中的每一项
          //         value:item.econNum
          //     }
          //   } else {
          //     // 累计确诊
          //     return {
          //         name:item.name, // item是被遍历数组中的每一项
          //         value:item.value
          //     }
          //   }
          // })
      // })
    },
    // 绘制中国地图
    initEchart() {
      // 获取容器
      var myChart = echarts.init(document.getElementById('main'));
      var option = {
          // 提示框
          tooltip: {
              //数据格式化
              formatter:function(params, callback){
                  return params.seriesName+'<br />'+params.name+'：'+params.value
              }
          },
          // 视觉设置
          visualMap: {
              min: 0,
              max: 500,
              left: 'left',
              top: 'bottom',
              text: ['高','低'],//取值范围的文字
              inRange: {
                  color: ['#e0ffff', 'red']//取值范围的颜色
              },
              show:true//图注
          },
          geo: {
              map: 'china',
              roam: false,//不开启缩放和平移
              zoom:1.23,//视角缩放比例
              label: {
                  normal: {
                      show: true,
                      fontSize:'10',
                      color: 'rgba(0,0,0,0.7)'
                  }
              },
              itemStyle: {
                  normal:{
                      borderColor: 'rgba(0, 0, 0, 0.2)'
                  },
                  emphasis:{
                      areaColor: 'yellow',//鼠标选择区域颜色
                      shadowOffsetX: 0,
                      shadowOffsetY: 0,
                      shadowBlur: 20,
                      borderWidth: 0,
                      shadowColor: 'rgba(0, 0, 0, 0.5)'
                  }
              }
          },
          // 鼠标悬浮提示框
          series : [
              {
                  name: '省份',
                  type: 'map',
                  geoIndex: 0,
                  data:this.new_data
              }
          ]
      };
      myChart.setOption(option);
    },
    // 截止时间
    end_time() {
      axios({
        url:'http://39.96.21.48:8001/epidemic/pageQuery',
        method:'get',
        params:{page:1,pageSize:1000}
      }).then((res)=>{
        this.endTime = moment(res.data.data.list[0].inputTime).format('YYYY-MM-DD HH:mm:ss')

        // 遍历数组，将总人数累加
        res.data.data.list.forEach((item)=>{
          // 累计确诊
          this.total_confirmed += item.confirmed
          //等价于 this.total_confirmed = this.total_confirmed + item.confirmed

          // 累计死亡
          this.total_dead += item.dead

          // 累计疑似
          this.total_suspected += item.suspected

          // 累计治愈
          this.total_cure += item.cure

          // 现有确诊
          this.total_severe += item.severe

          // 境外输入
          this.total_outside += item.outside
        })

        // 处理上海市
        var total_shanghai = res.data.data.list.filter((item)=>{
          return item.province == '上海市'
        })
        var severe_shanghai = 0
        total_shanghai.forEach((item)=>{
          severe_shanghai += item.severe
        })
        // 处理北京市
        var total_beijing = res.data.data.list.filter((item)=>{
          return item.province == '北京市'
        })
        var severe_beijing = 0
        total_beijing.forEach((item)=>{
          severe_beijing += item.severe
        })
        // 处理江苏省
        var total_jiangsu = res.data.data.list.filter((item)=>{
          return item.province == '江苏省'
        })
        var severe_jiangsu = 0
        total_jiangsu.forEach((item)=>{
          severe_jiangsu += item.severe
        })
        // 封装柱状图的数据
        this.bar_data = {
          name:[total_shanghai[0].province,total_beijing[0].province,total_jiangsu[0].province],
          value:[severe_shanghai,severe_beijing,severe_jiangsu]
        }
      })
    },
    // 浏览人数
    all_looks() {
      axios.get('/api/sop/api/epidemic').then((res)=>{
        this.looks = res.data.data.epidemic
      })
    },
    // 登录
    login() {
      var params = {
        username:'admin',
        password:123321
      }
      axios({
        url:'http://39.96.21.48:8001/user/login',
        method:'POST',
        data:params
      }).then((res)=>{
        // console.log(res,'-----')
        // console.log(res.data,'-----')
        // console.log(res.data.data,'-----')
        // console.log(res.data.data.token,'-----')
        // 将token存储到浏览器
        localStorage.setItem('token',res.data.data.token);
      })
    },
    // 国家的切换
    countryChange(name,title) {
      // if(title == '国内疫情') {

      // } else {

      // }

      if(name == 0) {
        // 显示国内疫情
        // 通过v-if/v-show来控制元素的显示和隐藏
        this.tag_ = true;
      } else {
        // 显示国外疫情
        this.tag_ = false;
      }
    }
  }
}
</script>

// 样式代码
<style scoped>
  .data_map .news:last-child .line_ {
    height: 135px;
  }
  .line_ {
    height: 160px;
    width: 2px;
    background-color: #ebebeb;
    margin-left: 6px;
  }
  .circle {
    height:15px;
    width: 15px;
    background-size: 100% 100%;
    background-image: url('');
  }
  .article {
    left: 37%;
    width:58%;
    height: 138px;
    background-color: white;
    padding: 10px;
    overflow: hidden; /* 超出3行的部分以省略号的形式显示 */
    display: -webkit-box; 
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 5; 
  }
  .line {
    left: 30%;
  }
  .time {
    left:5%;
    font-weight: 700;
    font-size: 14px;
  }
  .time ,.line ,.article {
    position: absolute;
  }
  .data_map {
    background-color: #f7f7f7;
    padding: 10px;
  }
  .news {
    position: relative;
    height: 175px;
  }
  .wrap >>> .van-row:first-child .van-col {
    background-color: #f5f6f7;
  }
  .data_table >>> .van-row:first-child {
    background-color: white;
  } 
  /* 除了第一行之外的所有行，下面的第一列 */
  .wrap >>> .van-row:not(:first-child) .van-col:first-child {
    background-color: #00bec9;
    color:white;
  }
  .data_table >>> .van-col {
    padding: 5px;
    text-align: center;
  }
  .data_table >>> .van-row {
    background-color: #f5f6f7;
    border-radius: 5px;
    text-align: center;
    margin-bottom: 5px;
  }
  .table_tag {
    color: #999;
    font-size: 14px;
    margin-top: 5px;
    margin-bottom: 15px;
  }
  .data_table {
    padding: 0 10px;
  }
  .china_map >>> .van-tabs__line {
    height: 0;
  }
  .china_map >>> .van-tab--active {
    background-color: white;
    margin: 3px;
    border-radius: 5px;
  }
  .china_map >>> .van-tabs__wrap {
    border-radius: 5px;
  }
  .china_map >>> .van-tabs__nav {
    background-color: #e3e6eb;
    border-radius: 5px;
  }
  .china_map {
    padding:10px;
  }
  .data_list .van-row:first-child {
    margin-bottom: 15px;
  }
  .data_list .van-row .van-col div {
    text-align: center; /* 文字水平居中 */
  }
  .num_color {
    color:#ff6a57;
  }
  #app >>> .van-grid-item__content::after,
  #app >>> .van-grid::after {
    border: none;
  }
  .data_list {
    margin-top: 35px;
  }
  .end_time div:nth-child(2) div:nth-child(2) {
    float: right;
  }
  .end_time div:nth-child(2) div:first-child {
    float: left;
  }
  .end_time div:nth-child(2) {
    font-size: 14px;
    color:#999;
  }
  .end_time {
    margin: 20px; /* 外边距 */
  }
  .end_time div:first-child {
    font-weight: 700; /* 字体粗细 */
  }
  /* 选中滑块的样式 */
  #app >>> .van-tabs__line { /* 深度选择器，用于更改第三方组件的样式 */
    background-color: #10aeb5;
  }
  .toArea span {
    float: left; /* 左浮动 */
  }
  .toArea i {
    background-image: url('https://mms-res.cdn.bcebos.com/mms-res/voicefe/captain/mola/Virus/1.1.287/assets/arrow-expand.62b1a23.svg');
    background-size: 100% 100%; /* 图片的大小占满容器 */
    width: 10px;
    height: 28px;
    display: inline-block; /* 给行内元素设置宽高的前提 */
  }
  .toArea {
    position: absolute;
    top: 8%;
    right: 17px;
    display: inline-block;
    max-width: 90px;
    height: 28px;
    padding: 0 10px;
    line-height: 28px;
    opacity: .76;
    background: #e5feff;
    border-radius: 51px;
    text-align: center;
    font-size: 14px;
    color: #104345;
  }
  .looks {
    position: absolute; /* 绝对定位 */
    top:70%;
    left:5%;
    font-size:12px; /* 字体大小 */
    color: white; /* 字体颜色 */
    background-color: rgba(9,148,167,.5);
    border-radius: 10px; /* 边框圆角 */
    padding:5px; /* 内边距 */
  }
  .desc_data {
    position: absolute; /* 绝对定位 */
    top:50%;
    left:5%;
    font-size:24px; /* 字体大小 */
    color: white; /* 字体颜色 */
    font-weight: 800; /* 字体粗细 */
  }
  .desc {
    position: absolute; /* 绝对定位 */
    top:36%;
    left:5%;
    font-size:16px; /* 字体大小 */
    color: white; /* 字体颜色 */
  }
  .logo {
    background-image: url('https://mms-res.cdn.bcebos.com/mms-res/voicefe/captain/images/76dcfc708847fdeff3d2ca67fc26419d.png?size=244*84');
    height: 28px;
    width:80px;
    background-size: 100% 100%;
    position: absolute; /* 绝对定位 */
    top:8%;
    left:5%;
  }
  .header {
    height:210px;
    background-image: url('https://mms-res.cdn.bcebos.com/mms-res/voicefe/captain/mola/Virus/1.1.287/assets/bg-header.840c435.jpg'); /* 背景图片 */
    background-size: 100% 100%; /* 图片的大小占满容器 */
    position: relative; /* 相对定位 */
  }
</style>